<template>
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="我的预约" :autoBack="true" :placeholder="true" />
		<u-gap height="10" bgColor="#f7f7f7"></u-gap>
		<block v-if="list.length">
			<u-list>
				<u-list-item v-for="(item, index) in list" :key="item.id">
					<view class="list-item coreshop-font-15" @click="$u.route('/pages/member/reservation/detail/index', {...item})">
						<view class="coreshop-flex coreshop-justify-between coreshop-align-center c-m-b-10">
							<text class="line-red">{{item.storeName}}</text>
							<u-tag :text="item.statusText"></u-tag>
						</view>
						<u-line color="#ccc" />
						<view class="c-p-t-10 c-p-b-10 coreshop-line-height-26">
							<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
								<text class="line-gray">到店时间</text>
								<text>{{item.appointmentTime}}</text>
							</view>
							<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
								<text class="line-gray">服务人员</text>
								<text>{{item.staffName}}</text>
							</view>
							<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
								<text class="line-gray">服务项目</text>
								<text>{{item.projectName}}</text>
							</view>
						</view>
						<u-line color="#ccc" />
						<view class="c-p-t-10 coreshop-flex coreshop-justify-end coreshop-align-center" @click.stop="">
							<view v-if="item.status === 0">
								<u-tag text="取消预约" plain @click="cancelReservation(item.id)"></u-tag>
							</view>
							<view class="c-m-l-10">
								<u-tag text="联系门店" plain plainFill @click="phoneCall(item.userPhone)"></u-tag>
							</view>
						</view>
					</view>
				</u-list-item>
			</u-list>
			<!-- <u-swipe-action>
				<u-swipe-action-item :index="index" :name="index" v-for="(item, index) in list" :key="item.id"
					@click="onClick" :options="options">
					<view class="list-item">
						<view class="title">{{item.projectName}}</view>
						<view class="dsc">{{item.appointmentTime}}</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action> -->
			<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" margin-top="20" margin-bottom="20" />
		</block>
		<!-- 无数据时默认显示 -->
		<view class="coreshop-emptybox" v-else>
			<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/collect.png'" icon-size="150" text="数据为空"
				mode="list"></u-empty>
		</view>
	</view>

</template>

<script>
	export default {

		data() {
			return {
				disabled: false,
				btnWidth: 180,
				show: false,
				options: [
					{
						text: '查看详情',
						style: {
							backgroundColor: '#71d5a1'
						}
					},
					{
						text: '取消预约',
						style: {
							backgroundColor: '#f9ae3d'
						}
					}
				],
				page: 1,
				limit: 10,
				list: [], // 预约列表
				status: 'loadmore',
				iconType: 'flower',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '努力加载中',
					nomore: '实在没有了'
				}
			};
		},
		onLoad() {
			this.getAppointmentList()
		},
		onReachBottom() {
			if (this.status === 'loadmore') {
				this.getAppointmentList()
			}
		},
		methods: {
			cancelReservation(id){
				let _this = this
				uni.showModal({
					title: '提示',
					content: '这是一个模态弹窗',
					success: function (e) {
						if (e.confirm) {
							_this.$u.api.CancelAppointment({id:id}).then(res=>{
								_this.page = 1
								_this.list = []
								_this.getAppointmentList()
							})
						}
					}
				});
			},
			phoneCall(mobile){
				uni.makePhoneCall({
					phoneNumber: mobile
				})
			},
			getAppointmentList() {
				let data = {
					page: this.page,
					limit: this.limit
				}
				this.status = 'loading '
				this.$u.api.AppointmentList(data).then(res => {
					if (res.status) {
						let _list = res.data.list;
						_list.forEach(item => {
							item.show = false;
						})
						this.list = [...this.list, ..._list]

						if (res.data.count > this.list.length) {
							this.page++
							this.status = 'loadmore'
						} else {
							this.status = 'nomore'
						}
					} else {
						this.$u.toast(res.msg)
					}
				})
			},
			// 操作处理
			onClick(e) {
				let that = this;
				let appointmentId = this.list[e.name].id;
				if (e.index === 0) {
					this.$u.route('/pages/member/reservation/detail/index', {
						...this.list[e.name]
					});
				} else {
					this.$u.api.CancelAppointment({
						id: appointmentId
					}).then(res => {
						that.$u.toast(res.msg)
						that.list = []
						that.getAppointmentList()
					})
				}
			},
		}
	};
</script>


<style lang="scss" scoped>
	.list-item {
		padding: 20rpx;
		background-color: #fff;
		margin-bottom: 20rpx;
		border-bottom: 1px #f7f7f7 solid;

		.title {
			font-size: 14px;
		}

		.dsc {
			margin-top: 10rpx;
			font-size: 12px;
			color: #999;
		}
	}
</style>
